<template>
	<div class="userlist-wrap">
		<el-table
			:data="tableData"
			stripe
			border
			@selection-change="handleSelectionChange"
			style="margin: 0px 5px"
			v-loading="listLoading"
		>
			<el-table-column type="selection"></el-table-column>
			<el-table-column label="序号" prop="sid" sortable width="100px"></el-table-column>
			<el-table-column label="头像" width="150px">
				<template #default="scope">
					<el-image style="width: 100px; height: 100px" :src="scope.row.picture" fit="fill"> </el-image>
				</template>
			</el-table-column>
			<el-table-column label="音乐名" prop="title"></el-table-column>
			<el-table-column label="歌手" prop="artist"></el-table-column>
			<el-table-column label="操作" fixed="right" width="250">
				<template #default="scope">
					<el-button
						type="primary"
						round
						size="small"
						:icon="isPlayer && currentId == scope.row.sid ? Loading : CirclePlus"
						@click="handleTryMusic(scope.$index, scope.row)"
						>{{ isPlayer && currentId == scope.row.sid ? '正在播放' : '试听' }}</el-button
					>
					<el-button
						type="success"
						size="small"
						:icon="EditPen"
						round
						@click="onUpdate(scope.$index, scope.row)"
						v-permission="['EditMusic']"
						>编辑</el-button
					>
					<el-button
						type="warning"
						round
						size="small"
						:icon="Delete"
						@click="handleDelete(scope.$index, scope.row)"
						v-permission="['RemoveMusic']"
						>删除</el-button
					>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			class="pagenation"
			layout="total,sizes, prev, pager, next, jumper"
			:total="total"
			:page-size="pageSize"
			:page-sizes="[5, 10, 20, 30]"
			:current-page="currentNo"
			background
			@current-change="handleCurrentChange"
			@size-change="handleSizeChange"
		></el-pagination>

		<!--编辑界面-->
		<el-dialog title="编辑" v-model="editFormVisible" :close-on-click-modal="false">
			<el-form label-width="80px" ref="editForm">
				<el-form-item label="音乐名">
					<el-input v-model="music.title"></el-input>
				</el-form-item>
				<el-form-item label="歌手">
					<el-input v-model="music.title"></el-input>
				</el-form-item>
				<el-form-item label="头像">
					<el-input v-model="music.picture"></el-input>
				</el-form-item>
				<el-form-item label="音乐">
					<el-input v-model="music.url"></el-input>
				</el-form-item>
				<el-form-item label="歌词">
					<el-input type="textarea" v-model="music.lyric" rows="8"></el-input>
				</el-form-item>
			</el-form>

			<div slot="footer" class="dialog-footer">
				<el-button @click="editFormVisible = false">取消</el-button>
				<el-button type="primary" @click="editSubmit">提交</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { RequestMusicListPage, RequestMusicDelete, RequestMusicFind, RequestMusicUpdate } from '@/api/path/music'
// import { baseURL } from '@/api/request'
import picUrl from '@/assets/images/y.jpg'
import { Delete, Loading, EditPen, View, CirclePlus, Upload } from '@element-plus/icons-vue'
export default {
	data() {
		return {
			tableData: [],
			currentNo: 1, //当前页号
			total: 0,
			pageSize: 5,
			picUrl,
			baseURL: import.meta.env.VITE_APP_BASE,
			//===播放器===
			audio: null,
			isPlayer: false,
			currentId: -1,
			//==编辑====
			editFormVisible: false, //编辑界面是否显示
			music: {
				title: '',
				artist: '',
				picture: '',
				url: '',
				lyric: '',
				sid: ''
			},
			listLoading: false
		}
	},
	created() {
		if (!this.audio) {
			this.audio = new Audio()
		}
		this.onRequestMusicList(this.currentNo, this.pageSize)
	},
	unmounted() {
		this.onPause()
		this.audio = null
	},
	methods: {
		onUpdate(id, row) {
			this.editFormVisible = true
			RequestMusicFind(row.sid).then(data => {
				if (data.resultCode == 1) {
					this.music.title = data.resultInfo.title
					this.music.artist = data.resultInfo.artist
					this.music.picture = data.resultInfo.picture
					this.music.url = data.resultInfo.url
					this.music.lyric = data.resultInfo.lyric
					this.music.sid = row.sid
				}
			})
		},
		// 提交编辑
		editSubmit() {
			this.editFormVisible = false
			RequestMusicUpdate(
				this.music.sid,
				this.music.title,
				this.music.artist,
				this.music.picture,
				this.music.url,
				this.music.lyric
			).then(data => {
				if (data.resultCode == 1) {
					this.onRequestMusicList(this.currentNo, this.pageSize)
					this.$message({
						type: 'success',
						message: '修改成功!'
					})
				}
			})
		},
		handleSelectionChange(val) {
			// console.log("val ", val);
		},
		// 删除用户
		handleDelete(index, row) {
			const id = row.sid
			this.$confirm('你确定要删除这条记录吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				RequestMusicDelete(id).then(data => {
					if (data.resultCode == 1) {
						// 删除成功
						this.onRequestMusicList(this.currentNo, this.pageSize)
						this.$message({
							type: 'success',
							message: '删除成功!'
						})
					}
				})
			})
		},
		// 请求不同页号
		handleCurrentChange(val) {
			this.currentNo = val
			this.onRequestMusicList(this.currentNo, this.pageSize)
		},
		// 页大小转变事件
		handleSizeChange(val) {
			this.pageSize = val
			this.onRequestMusicList(this.currentNo, this.pageSize)
		},
		// 封装接口调用
		onRequestMusicList(pageNo, pageSize) {
			// 请求接口数据
			this.listLoading = true
			RequestMusicListPage(pageNo, pageSize).then(data => {
				if (data.resultCode == 1) {
					const result = data.resultInfo
					this.currentNo = result.currentNo //当前页号
					this.total = result.total // 总记录条数
					this.pageSize = result.pageSize // 每页记录条数
					this.tableData = result.list
					this.listLoading = false
				}
			})
		},
		// 试听
		handleTryMusic(index, row) {
			if (this.currentId != row.sid) {
				this.initMusic(row.url)
				this.onPause()
				this.onPlay()
				this.currentId = row.sid
			} else {
				this.onPlayAndPause() //切换播放状态s
			}
		},
		initMusic(url) {
			this.audio.src = url
			this.audio.load()
		},
		//播放暂停切换
		onPlayAndPause() {
			if (this.isPlayer == false) {
				this.onPlay()
			} else {
				this.onPause()
			}
		},
		//播放
		onPlay() {
			this.audio.play()
			this.isPlayer = true
		},
		//暂停
		onPause() {
			this.audio.pause()
			this.isPlayer = false
		}
	}
}
</script>

<style lang="scss" scoped></style>
